<script setup>
import { ref, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';

const html = ref('<p>欢迎使用富文本编辑器！你可以在这里写你想要写的东西，然后实时预览效果！</p>');
const editorRef = ref();

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // mock 本地 base64 上传
      customUpload(file, insertFn) {
        const reader = new FileReader();
        reader.onload = (e) => {
          insertFn(e.target.result, file.name);
        };
        reader.readAsDataURL(file);
      },
    },
    uploadVideo: {
      // mock 本地 base64 上传
      customUpload(file, insertFn) {
        const reader = new FileReader();
        reader.onload = (e) => {
          insertFn(e.target.result, file.name);
        };
        reader.readAsDataURL(file);
      },
    },
  },
};

function handleCreated(editor) {
  editorRef.value = editor;
}
function goToWangEditor() {
  window.open('https://www.wangeditor.com/v5/', '_blank');
}

onMounted(() => {
  const observer = new MutationObserver(() => {
    if (editorRef.value) editorRef.value.setHtml(html.value);
  });
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
});
</script>

<template>
  <div class="rich-text-compiler">
    <div class="rt-header-row">
      <span class="rt-title">富文本编译器</span>
      <span class="rt-desc">本页面基于 wangEditor 实现，只做了基本的展示和简单功能</span>
      <span class="rt-tip-link" @click="goToWangEditor" title="点击跳转 wangEditor 官网">点我跳转 wangEditor 官网</span>
    </div>
    <div class="rt-main-area">
      <div class="rt-edit-area">
        <Toolbar :editor="editorRef" :defaultConfig="editorConfig" mode="default" />
        <Editor
          v-model="html"
          :defaultConfig="editorConfig"
          mode="default"
          style="flex: 1; width: 100%; border: 1px solid var(--w-e-toolbar-border-color, #e5e6eb); border-radius: 8px; background: var(--w-e-textarea-bg-color, #fff); color: var(--w-e-textarea-color, #222); margin-top: 8px; min-height: 0;"
          @onCreated="handleCreated"
        />
      </div>
      <div class="rt-preview-area">
        <div class="rt-preview-html" v-html="html"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.rich-text-compiler {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rt-header-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin: 24px 0 0 0;
}
.rt-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.rt-desc {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}
.rt-tip-link {
  color: #0052d9;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
  &:hover {
    color: #1890ff;
    text-decoration: underline;
  }
}
.rt-main-area {
  display: flex;
  gap: 24px;
  width: 100%;
  flex: 1;
  margin-top: 16px;
  min-height: 0;
}
.rt-edit-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rt-preview-area {
  flex: 1;
  min-width: 0;
  background: var(--td-bg-color-container, #fff);
  border-radius: 8px;
  box-shadow: none;
  padding: 24px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.rt-preview-html {
  flex: 1;
  font-size: 15px;
  color: #222;
  line-height: 1.8;
  word-break: break-all;
}
html.dark {
  --w-e-textarea-bg-color: #181c24;
  --w-e-textarea-color: #e5eaf3;
  --w-e-toolbar-bg-color: #181c24;
  --w-e-toolbar-color: #e5eaf3;
  --w-e-toolbar-border-color: #23272e;
  --w-e-bar-divider-color: #23272e;
}
html:not(.dark) {
  --w-e-textarea-bg-color: #fff;
  --w-e-textarea-color: #222;
  --w-e-toolbar-bg-color: #fff;
  --w-e-toolbar-color: #222;
  --w-e-toolbar-border-color: #e5e6eb;
  --w-e-bar-divider-color: #e5e6eb;
}
</style>